<template>
  <div>

    <!-- 通用工具栏 -->
      <navSearch :show-before="false" :formList="formList" :dataList="dataList" @btnSearch="btnSearch" ref="resetForm">
      </navSearch>
      <div>
      <!-- <el-col :span="3">
          <el-card class="mCard">
            总条数：{{page.total}}
        </el-card>
      </el-col> -->
      <el-button size="small" type="primary" style="float:right;margin-bottom :10px" @click="exportData">导出</el-button>
      </div>
   <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column type="index" prop="id" label="编号" width="60" ></el-table-column>
    <el-table-column prop="store" label="所属店铺" ></el-table-column>
    <el-table-column prop="image" label="商品图" width="80">
      <template v-slot="{row}">
        <el-image :src="row.image"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="namxe" label="商品名称" width="100"></el-table-column>
    <el-table-column prop="type" label="商品类型" width="110" ></el-table-column>
    <el-table-column prop="costPrice" label="成本价" width="90" ></el-table-column>
    <el-table-column prop="goodsPrice" label="原价"  width="90" ></el-table-column>
    <el-table-column prop="salesPrice" label="销售价"  width="86" sortable></el-table-column>
    <el-table-column prop="iventory" label="库存量"  width="86" sortable></el-table-column>
    <el-table-column prop="grossSales" label="总销量"  width="86" sortable></el-table-column>
    <el-table-column prop="totalSales" label="总销售额" width="100" sortable></el-table-column>
    <el-table-column prop="activity" label="参与活动" width="80" ></el-table-column>
    <el-table-column prop="hotSale" label="热销"  width="50" ></el-table-column>
    <el-table-column prop="status" label="状态"   width="50" :formatter="fromatStatus"></el-table-column>
    <el-table-column fixed="right" label="操作"  width="90" >
      <template slot-scope="{ row }">
        <el-button @click="btnUpdate(row)" type="text" size="small" :disabled="tableData.status" >{{row.status=="1"?"下架":"上架"}}</el-button>
        <el-button type="text" size="small" @click="btnDelete(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
</div>
</template>
<style>
.el-table .cell{
  text-align: center;
}
.mCard{
border: 1px solid skyblue;
  height:40px ;
  line-height: 5px;
  margin-bottom: 5px;
}
</style>
<script>
import { getGoodsList, delGoodsList, upGoodsStatus } from '@/api/goods'
import { getGoodsClassList} from '@/api/storeManage'

import goods from '@/api/constant/goods'
export default {
  data () {
    return {
      page: {
        page: 1,
        size: 3,
        total: 0
      },
      tableData: [],
      formList: {
        store: true,
        goods: true,
        goodsTypeS: true
      },
      dataList: []
    }
  },
  created () {
    this.getGoodsList()
    this.getGoodsClassList ()
  },
  methods: {
    // 渲染数据
    async getGoodsClassList () {
      this.dataList= await getGoodsClassList()
      console.log(this.dataList);
    },
    async getGoodsList () {
      this.tableData = await getGoodsList()
      // console.log(this.tableData)
      this.page.total = this.tableData.length
    },
    // changePage (newPage) {
    //   this.page.page = newPage
    //   this.getGoodsList()
    // },
    btnSearch (formData) {
      const { store, goods, goodsType } = formData
      if (store || goods || goodsType) {
        const arr = this.tableData.filter(item => item.name === goods || goods === '').filter(item => item.store === store || store === '').filter(item => item.type === goodsType || goodsType === '')
        this.tableData = arr
        this.$refs.resetForm.btnReset()
      } else {
        this.getGoodsList()
      }
    },
    async btnDelete (id) {
      try {
        await this.$confirm('确定删除该角色？')
        // 点击确定后进入以下代码
        await delGoodsList(id)
        // 更新页面显示
        console.log(222)
        this.getGoodsList()
        // 提示成功信息
        this.$message.success('删除角色成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 格式化聘用形式
    fromatStatus (row, colum, cellvalue, index) {
      const obj = goods.status.find(item => item.id === cellvalue)
      return obj ? obj.value : '未知'
    },
    async btnUpdate (row) {
      await this.$confirm(`确定${row.status === '1' ? '下架' : '上架'}该商品？`)
      const data = {
        id: row.id,
        status: row.status === '0' ? 1 : 0
      }
      await upGoodsStatus(data)
      this.getGoodsList()
    },
    // 导出excel数据
    exportData () {
      // 表头对应关系
      const headers = {
        商品编号: 'id',
        所属店铺: 'store',
        商品图: 'image',
        商品名称: 'name',
        商品类型: 'type',
        成本价: 'costPrice',
        原价: 'goodsPrice',
        销售价: 'salesPrice',
        库存量: 'iventory',
        总销量: 'grossSales',
        总销售额: 'totalSales',
        活动类型: 'activity',
        热销状态: 'hotSale',
        是否上架: 'status'
      }
      // 懒加载
      import('@/vendor/Export2Excel').then(async excel => {
        const rows = await getGoodsList()
        const data = this.formatJson(headers, rows)
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data,
          filename: '商品列表',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    // 该方法负责将数组转化成二维数组
    formatJson (headers, rows) {
      return rows.map(item => {
        return Object.keys(headers).map(key => {
          return item[headers[key]]
        })
      })
    }
  }

}
</script>
